<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.user-info-list{
    width: calc( 100% - 200px );
    display: inline-block;
    padding-left: 200px;
    margin-top: 20px;
    margin-bottom: 45px;
    background: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.53);
}
.user-info-list .user-photo{
	width:250px;
	height:250px;
	border-radius: 2px;
}
.user-info-list .ul-li{
	position: relative;
    border-radius: 2px;
    padding: 12px 17px;
    box-sizing: border-box;
    float: left;
    margin-bottom: -1px;
}
.user-info-list .ul-li a{
	display: block;
	width: 100%;
	height: 100%;
}
.user-info-list .ul-li img{
	width: 30px;
    height: 30px;
}
.user-info-list .ul-li span{
	font-family: Microsoft YaHei;
    margin-left: 10px;
    font-size: 16px;
	color: #464C7D;
}
.active{
    border-bottom: 2px solid #464C7D;
}
.head-infor{
	margin-top: 20px;
    position: relative;
    padding-left: 100px;
    line-height: 28px;
}
.head-infor img {
	width: 60px;
	height: 60px;
    position: absolute;
    left: 0;
    bottom: 9px;
    border-radius: 3px;
}
.head-infor .head-title{
    font-size: 22px;
    color: #464C7D;
    letter-spacing: 2px;
}
.head-infor #copyButton{
    font-size: 12px;
    color: #2BCEF5;
    cursor: pointer;
    margin-left: 15px;
}
.head-infor .head-span{
    font-size: 14px;
    color: #464C7D;
    margin-right: 15px;
}
.symbol-tip {
 	width: 16px!important;
    height: 16px;
    display: inline-block;
    padding: 0!important;
    margin-right: 4px;
    margin-bottom: -2px;
    background: url(/images/css_sprites.png) -388px -206px;
}
.home-left .left-action .follows-span {
	width: 60px!important;
}
/* 移动端 */
@media screen  and (max-width: 850px),@media screen  and (orientation: landscape),
only screen  and (max-device-width: 850px) {
	.header,
	.head-infor,
	.home-left{
		display: none;
	}
	.fly-main {
	    width: 100%;
	}
	.main {
	    width: 100%;
	    padding-top: 0;
	    padding-bottom: 0;
	    min-height: calc(100% - 140px);
	    margin: 0 auto;
	}
	.goBack {
        display: block;
        width: 100%;
        height: 1.36rem;
        padding-left:0.266667rem;
        line-height: 1.36rem;
        font-size: 0px;
        color:#262626;
        position:relative;
        box-sizing:border-box;
        background:#FDFCFA;
        margin-top:1.386667rem;
    }
    .goBack span{
        position: absolute;
        top:0.0rem;
        font-size: 0.426667rem;
    }
    .goBack i{
        font-size: 0.6rem;
	    margin-top: 0.05rem;
	    display: inline-block
    }
    .mobile-user-info {
    	width: 100%;
    	background:  #FDFCFA;;
    	height: 4.0rem;
   	    position: relative;
   	    text-align: center;
    }
     .mobile-user {
	    position: relative;
        width: auto;
    	display: inline-block;
    }
    .mobile-user img {
	    width: 1.466667rem;
	    height: 1.466667rem;
	    border-radius: 50%;
    }
    .mobile-user .level {
        font-size: 0.32rem;
	    color: #FFFFFF;
	    background: red;
	    width: 0.7rem;
	    height: 0.4rem;
	    line-height: 0.4rem;
	    border-radius: 0.4rem;
	    position: absolute;
	    bottom: 0;
	    left: -0.3rem;
    }
    .mobile-province {
   	    position: absolute;
        top: 0;
    	right: 1rem;
	    font-size: 0.32rem;
		color: #3FA1EE;
		letter-spacing: 0;
    }
    .mobile-province i {
	    font-size: 0.7rem;
        margin-right: 0.1rem;
    }
    .left-title {
    	font-size: 0.426667rem;
		color: #262626;
		margin-top: 0.3rem;
    }
    .follows-span {
    	font-size: 0.3rem;
    	width: 2.133333rem;
    	height: 0.8rem;
    	line-height: 0.9rem;
    	border-radius:  0.506667rem;
    	border: 1px solid #599aed;
    	color: #3FA1EE;
  	    display: inline-block;
  	    margin-top: 0.6rem;
    }
    .user-info-list {
        width: 100%;
	    background: rgba(255,255,255,0.90);
	    padding: 0;
	    margin-top: 0.2rem;
	    margin-bottom: 0;
        border-bottom: 1px solid #CBCBCB;
    }
	.user-info-list .ul-li a {
        display: inline-block;
    	padding: 0 0.4rem;
	}
	.user-info-list .ul-li span {
	    font-size: 0.426667rem;
	    color: #2A2A2A;
	    letter-spacing: 0;
	    display: inline-block;
    	padding: 0.4rem 0 ;
	}
	.user-info-list .ul-li {
	    width: 20%;
        padding: 0;
	}
	.active {
		border-bottom: 0;
	}
	.active a span{
		border-bottom: 3px solid #2A2A2A;
	}
	.home-right {
		width: 100%;
	}
}
</style>
<script src="/js/StackBlur.js"></script>
<script type="text/javascript">
function makeCanvas(){
	console.log("头像加载完成，开始制作高斯模糊背景")
	stackBlurImage( "userPhoto", "canvas", 3, false );
}
</script>
<div class="head-infor">
	<a href="#">
		<img  class="user-photo" alt="" src="/${curruser.fileurl!''}" onerror="this.src='/images/user/default.jpg';this.onerror=null">
	</a>
	<label class="head-title">${curruser.username!''}  的社区空间</label>
	<span id="copyButton" href="/user/otherUser/${curruser.id!''}.html">复制地址</span><br>
	<span class="head-span">发帖 ：${curruser.topicCount!'0'}</span>
	<span class="head-span">粉丝 ：${curruser.fans!'0'}</span>
</div>
<div class="goBack pc-display-none" onclick="window.location.href=document.referrer">
	<i class="layui-icon">&#xe603;</i>  
	<span>返回</span>
	<span class="title-name">${titleName}</span>
</div>
<div class="mobile-user-info pc-display-none">
	<div class="mobile-user">
		<img class="background" alt="" src="/${curruser.fileurl!''}" onerror="this.src='/images/user/default.jpg';this.onerror=null">
		<span class="level">lv${curruser.grade.grade!''}</span>
	</div>
	<span class="mobile-province"><i class="fa fa-map-marker"></i>${curruser.province!'未知位置'}<#if curruser.province??&&curruser.province!="">用户</#if></span>
	<div class="left-title">
		<span title="${curruser.username!''}">${curruser.username!''}</span>
	</div>
	<div class="left-action">
		<#if fansIs =="Yes">
			<span class="follows-span"  id="followsB" onclick="unfans('${curruser.id!''}')"><b>已关注</b></span>
		<#else>
			<span class="follows-span"  id="followsB" onclick="fans('${curruser.id!''}')"><b>立刻关注</b></span>
		</#if>
	</div>
</div>
<ul class="user-info-list">
	<li class="ul-li <#if typename?? && typename == 'index'>active</#if>">
		<a href="/user/otherUser/${curruser.id}.html">
			<span>首页</span>
		</a>
	</li>
	<li  class="ul-li <#if typename?? && typename == 'center' || typename == 'answer'>active</#if>">
		<a href="/user/center/${curruser.id}.html?userid=${curruser.id!''}">
			<span>帖子</span>
		</a>
	</li>
	<li  class="ul-li <#if typename?? && typename == 'collection' || typename == 'microcase'>active</#if>">
		<a href="/user/collection/${curruser.id}.html?userid=${curruser.id!''}">
			<span>收藏</span>
		</a>
	</li>
	<li  class="ul-li <#if typename?? && typename == 'downList' || typename == 'comment' || typename == 'addcomment'>active</#if>">
		<a href="/user/downlist.html?userid=${curruser.id!''}">
			<span>案例</span>
		</a>
	</li>
	<li  class="ul-li <#if subtype && subtype == 'messageboard'>active</#if>">
		<a href="/messageboard/otherIndex/${curruser.id!''}.html">
			<span>留言板</span>
		</a>
	</li>

</ul>
<div class="home-left">
	<div class="cut-img">
		<img id="userPhoto" onload="makeCanvas()" class="layui-hide" alt="" src="/${curruser.fileurl!''}" onerror="this.src='/images/user/default.jpg';this.onerror=null">
		<canvas id="canvas" width="256" height="191" class="background"></canvas>
	</div>
	<div class="left-information">
		<div class="left-title">
			<span title="${curruser.username!''}">${curruser.username!''}</span><span>( lv${curruser.grade.grade!''}.${curruser.grade.groups!''} )</span>
		</div>
		<div class="left-medal">
			<ul>
				<li><img alt="" src="/res/gradeFile/${curruser.grade.fileurl!''}.html"></li>
			</ul>
		</div>
		<div class="left-action">
			<#if fansIs =="Yes">
				<span class="follows-span"  id="followsB" onclick="unfans('${curruser.id!''}')"><span class="symbol-tip"></span><b>已关注</b></span>
			<#else>
				<span class="follows-span"  id="followsB" onclick="fans('${curruser.id!''}')"><span class="symbol-tip un"></span><b>关注</b></span>
			</#if>
		</div>
	</div>
</div>
<script src="/js/clipboard.min.js"></script>
<script>

var clipboard = new Clipboard('#copyButton', {
    text: function() {
    	var s = "http://www.myboxlab.com"+$("#copyButton").attr('href');
        return s;
    }
});
clipboard.on('success', function(e) {
	layer.msg('复制成功!', {icon:1});
});

clipboard.on('error', function(e) {
	layer.msg('复制失败请重新操作!', {icon:2});
});

function fans(id){
	$.ajax({
        type: "POST",
        url: "/user/fans/"+id,
        data: {},
        success: function(data){
        	if(data == "success"){
        		$("#followsB b").text("已关注");
        		$("#followsB").attr("onclick","unfans('"+id+"')");
        		layer.msg('关注成功', {icon: 1});
        	}else{
        		layer.msg('关注失败', {icon: 2});
        	}
        }
    });
}
function unfans(id){
	$.ajax({
        type: "POST",
        url: "/user/unfans/"+id,
        data: {},
        success: function(data){
        	if(data == "success"){
        		$("#followsB b").text("关注");
        		$("#followsB").attr("onclick","fans('"+id+"')");
        		layer.msg('取消关注成功', {icon: 1});
        	}else{
        		layer.msg('取消关注失败', {icon: 2});
        	}
        }
    });
}

</script>